<template>
  <div class="wp">
    <div class="hdr-bs">
      <h3 class="bs-tit">书架</h3>
      <img src="@/assets/2_2.png" class="hdr-pic" />
    </div>
    <div class="hdr-bs-two"></div>
    <div class="row-a2">
    <h3>新发布 <img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
     <ul class="ul-a2">
       <li v-for="(item, index) in news" :key="index" >
         <img :src="item.img" class="pic_n">
         <h2 class="t_name">{{item.name}}</h2>
         <h4 class="t_aur">{{item.author}}</h4>
       </li>
     </ul>
    </div>
    <div class="row-a2">
    <h3>未读 <img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
     <ul class="ul-a2">
       <li v-for="(item, index) in nored" :key="index" >
         <img :src="item.img" class="pic_n">
         <h2 class="t_name">{{item.name}}</h2>
         <h4 class="t_aur">{{item.author}}</h4>
       </li>
     </ul>
    </div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
      news: [
        {
          id :'1',
          img:require('@/assets/2_12.png'),
          name: '三体：死神永生',
          author: '刘慈心'
        },
        {
          id :'2',
          img:require('@/assets/2_13.png'),
          name: '人类简史',
          author: '尤瓦尔• 郝拉利'
        },
        {
          id :'3',
          img:require('@/assets/2_14.png'),
          name: '徐三观卖血记',
          author: '余华'
        }
      ],
      nored: [
        {
          id :'1',
          img:require('@/assets/2_12.png'),
          name: '三体：死神永生',
          author: '刘慈心'
        },
        {
          id :'2',
          img:require('@/assets/2_13.png'),
          name: '人类简史',
          author: '尤瓦尔• 郝拉利'
        },
        {
          id :'3',
          img:require('@/assets/2_14.png'),
          name: '徐三观卖血记',
          author: '余华'
        },
         {
          id :'1',
          img:require('@/assets/2_12.png'),
          name: '三体：死神永生',
          author: '刘慈心'
        },
        {
          id :'2',
          img:require('@/assets/2_13.png'),
          name: '人类简史',
          author: '尤瓦尔• 郝拉利'
        },
        {
          id :'3',
          img:require('@/assets/2_14.png'),
          name: '徐三观卖血记',
          author: '余华'
        }
        ,
         {
          id :'1',
          img:require('@/assets/2_12.png'),
          name: '三体：死神永生',
          author: '刘慈心'
        },
        {
          id :'2',
          img:require('@/assets/2_13.png'),
          name: '人类简史',
          author: '尤瓦尔• 郝拉利'
        },
        {
          id :'3',
          img:require('@/assets/2_14.png'),
          name: '徐三观卖血记',
          author: '余华'
        }
      ]
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>

<style lang='less'>
  .hdr-bs{
      position: relative;
      width: 100%;
      height: 200px;
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: 999;
      background-color: #21272e;
    .bs-tit{
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      margin-top: 104px;
     font-size: 44px;
	   font-weight: normal;
	   font-stretch: normal;
	   letter-spacing: 0px;
	   color: #ffffff;
    }
    .hdr-pic{
    float: right;
    width: 34px;
    height: 28px;
    margin-top: 118px;
    margin-right: 48px;
    left: 82px;
    }
  }
  .hdr-bs-two{
    height: 200px;
  }
  .row-a2{
  margin-left: 50px;
  overflow: hidden;
  h3 {
    margin-top: 40px;
    font-size: 36px;
    font-weight: normal;
    color: #ffffff;
    span {
      float: right;
      margin-top: 3px;
      margin-right: 10px;
      font-size: 26px;
      color: #a2a8ba;
    }
    img {
      float: right;
      width: 10px;
      margin-top: 12px;
      margin-right: 50px;
    }
  }
  .ul-a2{
    overflow: hidden;
    width: 100%;
    margin-top: -40px;
    padding-bottom: 65px;
    li{
      width: 200px;
     float: left;
     padding-right: 30px;
       margin-top: 70px;
    }
  }
  .pic_n{
   width: 192px;
 
  }
  .t_name{
  margin: 0;
  font-size: 28px;
	font-weight: normal;
	font-stretch: normal;
	color: #ffffff;
  }
  .t_aur{
  padding-top: 5px;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	color: #5d637c;
  }
}
</style>